<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>发布</title>
		<script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>
		<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
		<link rel="stylesheet" href="./css/jquery.mobile-1.4.5.min.css" />
		<link rel="stylesheet" type="text/css" href="css/base.css"/>
		<link rel="stylesheet" type="text/css" href="style.css"/>
	</head>
	<body>
		<div data-role="page">
			<!-- 顶部返回按钮 -->
			<div style="height: 3rem;text-align: left; position: fixed;background-color: white;width: 100%;border-bottom: 1px solid #d3d3d3;" >
				<div style="float: left;width: 30%;">
					<a class="a1" href="main.html" style ="font-size: 2rem;margin-left: 1rem;margin-top: 0.25rem;float: left;"data-role="none" data-transition="slide" data-direction="reverse" ><i class="icon-jiantou-zuo"></i></a>
				</div>
				<div style="float: 70%;float: left;margin:0.5rem 0 0 8%;font-size: 1.4rem;">发布动态</div>
			</div>
			<!-- 图片区 -->
			<form action="" method="post">
				<div style="margin-top: 3rem;width: 100%;">
					<table class="sen-table">
						<tr>
							<td style="padding-top: 1rem;">
								<span style="font-size: 1.1rem;margin: 0 0 0 3rem;">添加图片</span>
							</td>
						</tr>
						<tr>
							<td  style="padding-bottom: 2rem;">
								<div class="sen-div1">
									<img src="img/head6.jpeg" width="100%"height="100%"/>
								</div>
								
								<div class="sen-div2"><i class="icon-jiahao"></i></div>
							</td>
						</tr>
					</table>
				<!-- 文本区 -->
					<table class="sen-table">
						<tr>
							<td style="padding-top: 1rem;"><span style="font-size: 1.1rem;margin: 0 0 0 3rem;">添加文字</span><span style="font-size: 1rem;color: #BBBBBB;">(0-500字)</span></td>
						</tr>
						<tr>
							<td style="padding-left: 12%;padding-top: 1rem;">
								<textarea class="sen-text" data-role="none" rows="10" cols="27" placeholder="点击此处输入文字" onfocus="this.placeholder=''" onblur="this.placeholder='点击此处输入文字'"></textarea>
							</td>
						</tr>
					</table>
					<!-- 主题区 -->
					<table  class="sen-table">
						<fieldset data-type="horizontal" data-role="controlgroup"style="text-align: center;background-color: white;height: 3.2rem;margin-top: 0.8rem;padding-top: 0.5rem;">
							<label id="lable1">
								<input type="radio" name="zhu" value="" onclick="choosen1()">#日常
							</label>
							<label  id="lable2" style="margin-left: 1rem;">
								<input type="radio" name="zhu" value="" onclick="choosen2()">#寻物
							</label>
							<label  id="lable3" style="margin-left: 1rem;">
								<input type="radio" name="zhu"  value="" onclick="choosen3()">#学习
							</label>
						</fieldset>
					</table>
					<!-- 发布按钮 -->
					<div style="width: 100%;">
						<div id="button">
							<a href="main.html" data-role="none" style="text-decoration: none;outline: none;" data-transition="flow">
								<input type="button" value="确认发布" />
							</a>
							
						</div>
						
					</div>
				</div>
			</form>
			
		</div>
	</body>
	<script>
		function choosen1() {
			document.getElementById('lable1').style.background='#7D7DE9';
			document.getElementById('lable1').style.color='white';
			document.getElementById('lable2').style.background='white';
			document.getElementById('lable2').style.color='black';
			document.getElementById('lable3').style.background='white';
			document.getElementById('lable3').style.color='black';
		}
		function choosen2() {
			document.getElementById('lable2').style.background='#7D7DE9';
			document.getElementById('lable2').style.color='white';
			document.getElementById('lable1').style.background='white';
			document.getElementById('lable1').style.color='black';
			document.getElementById('lable3').style.background='white';
			document.getElementById('lable3').style.color='black';
		}
		function choosen3() {
			document.getElementById('lable3').style.background='#7D7DE9';
			document.getElementById('lable3').style.color='white';
			document.getElementById('lable1').style.background='white';
			document.getElementById('lable1').style.color='black';
			document.getElementById('lable2').style.background='white';
			document.getElementById('lable2').style.color='black';
		}
	</script>
</html>
